曝光埋点监听实现

Intersection Observer API: https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

2023.2.20 星期一

IntersectionObserver 方式

var intersectionObserver = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if( entry.intersectionRatio > 0 ) {
            report(entry.target)
        }
    })
})
var nodes = document.querySelectorAll(".item")
nodes.forEach(node => {
    intersectionObserver.observe(node)
})

主要用到的API
IntersectionObserver 主要用来检测被监听的目标元素可见部分与root元素的交叉状况，比如获取相交区域的比例值，后面做曝光埋点的判断需要用到。

requestIdleCallback 方法，浏览器会在空闲时执行传入的函数。后面埋点我们使用这个方法，避免埋点影响主业务。

项目中使用

实现的方式主要有两种：
函数的方式；
高阶组件的方式；
<!– PS:
app.jsx中使用新的hooks；不用每个组件都调用。可以用高阶组件， 或者函数试：useEffect(() => {useExpo()}, [])
高阶组件，不用通过class获取目标元素。而是const ref = useRef<any>(null);

taro或者小程序项目有api：Taro.createIntersectionObserver
–>

requestIdleCallback